<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <f:view contentType="text/html">

        <h:head>
            <title>Genie Pedidos - Balcão</title>
            <meta name="viewport" content="width=device-width, user-scalable=no"/>
            <h:outputStylesheet library="css" name="estilo_balcao.css" />
            <h:outputStylesheet library="css" name="font-awesome.min.css" />
            <link rel="icon" href="#{request.contextPath}/diGabriel/_img/logo.png" type="image/ico" />
        </h:head>

        <h:body>            
            <p:socket channel="/atualizaPedido">
                <p:ajax event="message" update="formPedidosPendentes :formExibeTotal :formBtnAtendimento :formPedidosProntos"/>
            </p:socket>

            <div id="div-logo" class="componenteOpaco">
                <h:graphicImage library="img" name="logo-genie-peq.svg" width="216" height="111"/>
            </div>

            <h:form>
                <p:poll interval="60" update="@this" />
            </h:form>

            <h:form>                
                <p:growl id="growl" sticky="false" life="2000"/>
            </h:form>

            <div id="div-mensagem-portrait" class="display-none">
                <p>Esta tela é melhor visualizada com o tablet na posição horizontal.</p>
                <p>Por favor, deixe o seu tablet na posição horizontal.</p>
            </div>

            <div id="div-fixo">
                <div id="div-cabecalho" class="componenteOpaco">
                </div>

                <h:form id="formBtnAtendimento">
                    <span id="span-btn-ref" class="componenteOpaco">

                        <p:commandButton value=""
                                         actionListener="#{controladorAtendimentoMB.iniciaAtendimento()}"                                         
                                         rendered="#{controladorAtendimentoMB.atendimentoIniciado == false}"
                                         style="font-family: FontAwesome"
                                         styleClass="fa fa-power-off btnAtendimento desligado"
                                         ajax="false" update=":growl"/>

                        <p:commandButton value=""
                                         rendered="#{controladorAtendimentoMB.atendimentoIniciado}"
                                         style="font-family: FontAwesome"
                                         styleClass="fa fa-power-off btnAtendimento ligado"
                                         oncomplete="PF('dialogEncerrarBalcao').show()"/>

                    </span>
                </h:form>

                <span id="span-pedidos" class="fa fa-pencil-square-o nav-ativo componenteOpaco"></span>
                <span id="span-mesas" class="fa fa-table nav-inativo componenteOpaco"></span>

            </div>

            <!-- DIALOG -->

            <p:dialog id="dialogDetalhe" closable="false" header="Detalhes do Pedido"
                      position="center"
                      widgetVar="dialogDetalhe" modal="true" resizable="false" draggable="false"
                      styleClass="fundoBranco componenteOpaco">

                <h:form id="formDialogDetalhe">
                    <div class="div-dataTable-detalhe componenteOpaco">                    
                        <p:dataTable id="listaProdutosDetalhe" value="#{controladorAtendimentoMB.listaProdutosPedido}" var="produto"
                                     scrollable="true" scrollHeight="270">

                            <p:column headerText="Produto" style="width: 50%;">
                                #{produto.nome}
                            </p:column>

                            <p:column headerText="Qtd." style="width: 10%;">
                                #{produto.quantidadeVenda}
                            </p:column>

                            <p:column headerText="Valor Unit." style="width: 15%;">
                                #{produto.precoMonetario}
                            </p:column>

                            <p:column headerText="Valor Total" style="width: 15%;">
                                #{produto.precoMonetarioVarios}
                            </p:column>

                        </p:dataTable>
                    </div>
                </h:form>

                <h:form id="formAtendeMesa">
                    <div class="div-btn-voltar-pedido-botao componenteOpaco">
                        <p:commandButton value="Voltar" style="width: 100%; height: 100%;"
                                         oncomplete="PF('dialogDetalhe').hide()"
                                         styleClass="botao-normal"/>
                    </div>

                    <div class="div-btn-confirma-pedido-botao componenteOpaco">                    
                        <p:commandButton value="Atender Pedido" style="width: 100%; height: 100%;"
                                         action="#{controladorAtendimentoMB.atendePedido()}"
                                         rendered="#{controladorAtendimentoMB.renderizaBotaoAtendimento() == 0}"
                                         update=":formPedidosPendentes"
                                         oncomplete="PF('dialogDetalhe').hide()"
                                         styleClass="botao-padrao"/>

                        <p:commandButton value="Atender Conta" style="width: 100%; height: 100%;"
                                         action="#{controladorAtendimentoMB.encerraConta()}"
                                         rendered="#{controladorAtendimentoMB.renderizaBotaoAtendimento() == 1}"
                                         update=":formPedidosPendentes"
                                         oncomplete="PF('dialogDetalhe').hide()"
                                         styleClass="botao-padrao"/>

                        <p:commandButton value="Pedido Pronto" style="width: 100%; height: 100%;"
                                         action="#{controladorAtendimentoMB.informaPedidoPronto()}"
                                         rendered="#{controladorAtendimentoMB.renderizaBotaoAtendimento() == 2}"
                                         update=":formPedidosPendentes"
                                         oncomplete="PF('dialogDetalhe').hide()"
                                         styleClass="botao-padrao"/>
                    </div>                    
                </h:form>

                <h:form id="formExibeTotal">
                    <div class="div-exibe-total componenteOpaco">                    
                        <h:outputText value="TOTAL:&nbsp;&nbsp; #{controladorAtendimentoMB.totalContaMesaAtendimentoMonetario}"
                                      rendered="#{controladorAtendimentoMB.exibeTotal}"/>
                    </div>
                </h:form>
            </p:dialog>

            <!-- DIALOG DETALHE DA MESA A FECHAR -->

            <p:dialog id="dialogDetalheMesa" closable="false" header="Detalhes da Mesa a Fechar"
                      widgetVar="dialogDetalheMesa" modal="true" resizable="false" draggable="false"
                      styleClass="fundoBranco componenteOpaco">               

                <h:form id="formDialogDetalheMesa">
                    <div class="div-dataTable-detalhe componenteOpaco">                   
                        <p:dataTable id="listaProdutosDetalheMesa" value="#{controladorAtendimentoMB.listaProdutosPedidoMesa}" var="mesa"
                                     scrollable="true" scrollHeight="270">

                            <p:column headerText="Produto" style="width: 50%;">
                                #{mesa.nome}
                            </p:column>

                            <p:column headerText="Qtd." style="width: 10%;">
                                #{mesa.quantidadeVenda}
                            </p:column>

                            <p:column headerText="Valor Unit." style="width: 15%;">
                                #{mesa.precoMonetario}
                            </p:column>

                            <p:column headerText="Valor Total" style="width: 15%;">
                                #{mesa.precoMonetarioVarios}
                            </p:column>

                        </p:dataTable>
                    </div>
                </h:form>

                <h:form id="formAtendeMesaFechar">
                    <div class="div-btn-voltar-pedido-botao componenteOpaco">
                        <p:commandButton value="Voltar" style="width: 100%; height: 100%;"
                                         oncomplete="PF('dialogDetalheMesa').hide()"
                                         styleClass="botao-normal"/>
                    </div>

                    <div class="div-btn-confirma-pedido-botao componenteOpaco">                    
                        <p:commandButton value="Fechar Mesa" style="width: 100%; height: 100%;"
                                         oncomplete="PF('dialogConfirmaFecharMesa').show()"
                                         styleClass="botao-padrao"/>
                    </div>                    
                </h:form>

                <h:form id="formExibeTotalMesa">
                    <div class="div-exibe-total componenteOpaco">                    
                        <h:outputText value="TOTAL:&nbsp;&nbsp; #{controladorAtendimentoMB.totalContaMesaAtendimentoMonetario}"
                                      rendered="#{controladorAtendimentoMB.exibeTotal}"/>
                    </div>
                </h:form>
            </p:dialog>

            <!-- DIALOG HISTORICO DE PEDIDOS POR MESA -->

            <p:dialog id="dialogHistoricoMesa" closable="false" header="Histórico de Pedidos"
                      position="center"
                      widgetVar="dialogHistoricoMesa" modal="true" resizable="false" draggable="false"
                      styleClass="fundoBranco componenteOpaco">

                <hr style="height:0; visibility:hidden; margin-bottom:-5px;" />
                <div style="width:50%;margin: 0 auto 58px auto">
                    <div id="historico-mesa-por-produto" class="botao-padrao botao-historico">
                        Todos os Produtos
                    </div>
                    <div id="historico-mesa-por-pedido" class="botao-normal botao-historico">
                        Por Pedido
                    </div>
                </div>

                <h:form id="formHistoricoMesaPorPedido" >
                    <div class="div-dataTable-detalhe componenteOpaco">                   
                        <p:dataTable id="listaProdutosHistoricoMesa" value="#{controladorAtendimentoMB.listaProdutosPedidoMesa}" var="mesaHist"
                                     scrollable="true" scrollHeight="230" emptyMessage="">

                            <p:column headerText="Produto" style="width: 50%;">
                                #{mesaHist.nome}
                            </p:column>

                            <p:column headerText="Qtd." style="width: 10%;">
                                #{mesaHist.quantidadeVenda}
                            </p:column>

                            <p:column headerText="Valor Unit." style="width: 15%;">
                                #{mesaHist.precoMonetario}
                            </p:column>

                            <p:column headerText="Valor Total" style="width: 15%;">
                                #{mesaHist.precoMonetarioVarios}
                            </p:column>

                        </p:dataTable>
                    </div>
                </h:form>

                <h:form id="formHistoricoMesa" style="display:none">
                    <div class="div-dataTable-detalhe componenteOpaco">                    
                        <p:dataTable id="listaHistoricoPedidos" value="#{controladorAtendimentoMB.listaPedidosEmAbertoPorMesa}" var="pedido"
                                     scrollable="true" scrollHeight="230" emptyMessage="">

                            <p:column headerText="Pedidos" style="width: 50%;">
                                <p:commandLink actionListener="#{controladorAtendimentoMB.exibeDetalhesPedido(pedido)}"
                                           ajax="true" update=":formDialogDetalheHistoricoPedido :formExibeTotalHistoricoPedido"
                                           oncomplete="PF('dialogDetalheHistoricoPedido').show()"
                                           style="text-decoration: none;">
                                    <div style="width:100%;height:100%;">
                                        <div style="padding-top:16px">
                                            <h:outputText value="Pedido #{pedido.id}" />
                                        </div>
                                    </div>
                                </p:commandLink>
                            </p:column>

                            <p:column headerText="Qtd. de Produtos" style="width: 20%;">
                                #{pedido.quantidade}
                            </p:column>

                            <p:column headerText="Valor Total" style="width: 20%;">
                                <h:outputText value="R$ #{pedido.totalFormatado}" />
                            </p:column>

                        </p:dataTable>
                    </div>
                </h:form>

                <h:form id="formHistoricoMesaFechar">
                    <div class="div-btn-voltar-pedido-botao componenteOpaco">
                        <p:commandButton value="Voltar" style="width: 100%; height: 100%;"
                                         oncomplete="PF('dialogHistoricoMesa').hide()"
                                         onclick="botaoProdutos()"
                                         styleClass="botao-normal"/>
                    </div>

                    <div class="div-btn-confirma-pedido-botao componenteOpaco">                    
                        <p:commandButton value="Fechar Mesa" style="width: 100%; height: 100%;"
                                         oncomplete="PF('dialogConfirmaFecharMesa').show()"
                                         styleClass="botao-padrao"/>
                    </div>                    
                </h:form>

                <h:form id="dialogHistoricoMesaExibeTotal">
                    <div class="div-exibe-total componenteOpaco">                    
                        <h:outputText value="TOTAL:&nbsp;&nbsp; #{controladorAtendimentoMB.totalContaMesaAtendimentoMonetario}"
                                      rendered="#{true}"/>
                    </div>
                </h:form>
            </p:dialog>
            
            <!-- DIALOG DETALHES DO HISTORICO DO PEDIDO -->
            
            <p:dialog id="dialogDetalheHistoricoPedido" closable="false" header="Detalhes do Pedido"
                      position="center"
                      widgetVar="dialogDetalheHistoricoPedido" modal="true" resizable="false" draggable="false"
                      styleClass="fundoBranco componenteOpaco">

                <h:form id="formDialogDetalheHistoricoPedido">
                    <div class="div-dataTable-detalhe componenteOpaco">                    
                        <p:dataTable id="listaProdutosDetalheHistoricoPedido" value="#{controladorAtendimentoMB.listaProdutosPedido}" var="produto"
                                     scrollable="true" scrollHeight="270">

                            <p:column headerText="Produto" style="width: 50%;">
                                #{produto.nome}
                            </p:column>

                            <p:column headerText="Qtd." style="width: 10%;">
                                #{produto.quantidadeVenda}
                            </p:column>

                            <p:column headerText="Valor Unit." style="width: 15%;">
                                #{produto.precoMonetario}
                            </p:column>

                            <p:column headerText="Valor Total" style="width: 15%;">
                                #{produto.precoMonetarioVarios}
                            </p:column>

                        </p:dataTable>
                    </div>
                </h:form>

                <h:form id="formAtendeMesaHistoricoPedido">
                    <div class="div-btn-voltar-pedido-botao componenteOpaco">
                        <p:commandButton value="Voltar" style="width: 100%; height: 100%;"
                                         oncomplete="PF('dialogDetalheHistoricoPedido').hide()"
                                         styleClass="botao-normal"/>
                    </div>
                </h:form>

                <h:form id="formExibeTotalHistoricoPedido">
                    <div class="div-exibe-total componenteOpaco">                    
                        <h:outputText value="TOTAL:&nbsp;&nbsp; #{controladorAtendimentoMB.totalContaMesaAtendimentoMonetario}"
                                      rendered="#{controladorAtendimentoMB.exibeTotal}"/>
                    </div>
                </h:form>
            </p:dialog>

            <!-- DIALOG CONFIRMA FECHAR MESA -->

            <p:dialog id="dialogConfirmaFecharMesa" closable="false" header="Fechar Mesa"
                      widgetVar="dialogConfirmaFecharMesa" modal="true" resizable="false" draggable="false"
                      styleClass="fundoBranco componenteOpaco">               

                <h:outputText value="Tem certeza que deseja fechar esta mesa?" styleClass="textoDialog"/>
                <br/><br/>

                <div class="div-encerra-atendimento componenteOpaco">
                    <h:form id="formDialogConfirmaFecharMesa">
                        <p:commandButton value="Sim" actionListener="#{controladorAtendimentoMB.encerraContaNoBalcao()}"
                                         ajax="false" oncomplete="PF('dialogConfirmaFecharMesa').hide()"
                                         update=":formPedidosPendentes :formPedidosProntos"
                                         style="float:left;width:150px;"
                                         styleClass="botao-normal"/>

                        <p:commandButton value="Não" onclick="PF('dialogConfirmaFecharMesa').hide()" style="float:right;width:150px;"
                                         styleClass="botao-padrao"/>
                    </h:form>
                </div>
            </p:dialog>

            <!-- DIALOG ENCERRAR BALCÃO -->

            <p:dialog id="dialogEncerrarBalcao" closable="false" header="Encerrar Atendimento"
                      widgetVar="dialogEncerrarBalcao" modal="true" resizable="false" draggable="false"
                      styleClass="fundoBranco componenteOpaco">               

                <h:outputText value="Tem certeza que deseja encerrar o atendimento?" styleClass="textoDialog"/>
                <br/><br/>

                <div class="div-encerra-atendimento componenteOpaco">
                    <h:form id="formDialogEncerrarBalcao">
                        <p:commandButton value="Sim" actionListener="#{controladorAtendimentoMB.encerraAtendimento()}"
                                         ajax="false" update=":growl" oncomplete="PF('dialogEncerrarBalcao').hide()"
                                         style="float:left;width:150px;" styleClass="botao-normal"/>

                        <p:commandButton id="btn-encerra-nao" value="Não" onclick="PF('dialogEncerrar
                                        Balcao').hide()" style="float:right;width:150px;"
                                         styleClass="botao-padrao"/>
                    </h:form>
                </div>
            </p:dialog>

            <!-- INÍCIO MESAS PENDENTES -->

            <div id="div-lista-pedidos-preparo" class="div-lista-pedidos componenteOpaco">
                <h:form id="formPedidosPendentes">
                    <p:dataGrid id="listPedidos" columns="4" value="#{controladorAtendimentoMB.listaPedidoModel}" var="pedido"
                                layout="grid"
                                paginator="true" rowIndexVar="#{pedido.id}"
                                emptyMessage=""
                                paginatorAlwaysVisible="false"
                                paginatorPosition="top"
                                paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}"
                                currentPageReportTemplate="{currentPage} de {totalPages}">

                        <p:panel style="#{controladorAtendimentoMB.retornaBackgroundColorPedido(pedido.status)};
                                 margin: 5px;">
                            <div id="div-mesa">
                                <hr style="height:0; visibility:hidden; margin-bottom:-14px;" />
                                <h:outputText value="Mesa" style="font-size: 12px;"/>
                                <hr style="height:0; visibility:hidden; margin-bottom:-17px;" />
                                <h:outputText value="#{pedido.mesa.numero}" style="font-size: 18px; font-weight: bolder;"/>
                            </div>
                            <p:commandLink actionListener="#{controladorAtendimentoMB.exibeDetalhesPedido(pedido)}"
                                           ajax="true" update=":formDialogDetalhe :formAtendeMesa :formExibeTotal"
                                           oncomplete="PF('dialogDetalhe').show()"
                                           style="text-decoration: none">
                                <p:panelGrid >
                                    <div style="text-align: center; padding: 18px 0;">
                                        <h:outputText value="Pedido #{pedido.id}"/>
                                    </div>
                                </p:panelGrid>
                            </p:commandLink>
                        </p:panel>
                    </p:dataGrid>
                </h:form>
            </div>

            <!-- FIM MESAS PENDENTES -->

            <!-- INÍCIO HISTÓRICO DE PEDIDOS -->

            <div id="div-lista-pedidos-prontos" class="div-lista-pedidos display-none componenteOpaco">
                <h:form id="formPedidosProntos">
                    <p:dataGrid id="listPedidosProntos" columns="4" value="#{controladorAtendimentoMB.listaMesasAtendimentoEmAberto}" var="mesaHistorico"
                                layout="grid"
                                paginator="true" rowIndexVar="#{mesaHistorico.numero}"
                                emptyMessage="A lista está vazia."
                                paginatorAlwaysVisible="false"
                                paginatorPosition="top"
                                paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}"
                                currentPageReportTemplate="{currentPage} de {totalPages}">

                        <p:panel style="background-color: lightgray; margin: 5px;">
                            <p:commandLink actionListener="#{controladorAtendimentoMB.retornaPedidosEmAbertoPorMesa(mesaHistorico)}"
                                           ajax="true" update=":formHistoricoMesaPorPedido :formHistoricoMesa :dialogHistoricoMesaExibeTotal"
                                           oncomplete="PF('dialogHistoricoMesa').show()"
                                           style="text-decoration: none">
                                <p:panelGrid>
                                    <div style="text-align: center; padding: 18px 0;">
                                        <h:outputText value="Mesa #{mesaHistorico.numero}"/>
                                    </div>
                                </p:panelGrid>
                            </p:commandLink>
                        </p:panel>
                    </p:dataGrid>
                </h:form>
            </div>

            <!-- FIM HISTÓRICO DE PEDIDOS -->

            <div id="div-legenda" class="componenteOpaco">
                <table>
                    <tr>
                        <td class="td-leg-cor" style="background-color: yellow;"></td>
                        <td class="td-leg-txt">Pendente</td>
                        <td class="td-leg-cor" style="background-color: lightgreen;"></td>
                        <td class="td-leg-txt">Em Preparo</td>
                        <td class="td-leg-cor" style="background-color: lightblue;"></td>
                        <td class="td-leg-txt">Conta</td>
                    </tr>
                </table>
            </div>

            <script src="_js/mainBalcao.js"></script>
        </h:body>
    </f:view>
</html>
